<template>
  <div class="main">
    <div class="jianju">
      <label for="" style="height: 30px">视频标题</label>
      <input
        type="text"
        v-model="title"
        class="yangshi"
        placeholder="输入音频标题名称(建议填写字数4-15)"
      />
    </div>
    <div class="jianju">
      <label for="">关联老师</label>
      <select name="" id="" class="yangshi" v-model="teacher">
        <option value="">选择关联老师</option>
        <option value="0">王如军</option>
        <option value="1">张梦龙</option>
        <option value="2">武项慧</option>
      </select>
    </div>
    <div class="jianju">
      <label for="">选择类型分类</label>
      <select name="" id="" class="yangshi" v-model="cate">
        <option value="">请选择分类</option>
        <option value="0">线下</option>
        <option value="1">线上</option>
        <option value="2">其他</option>
      </select>
    </div>
    <div class="jianju ding">
      <div>选择收费模式</div>
      <div>
        <input
          type="radio"
          name="money"
          value="0"
          v-model="moneyMode"
          @click="show = true"
        />
        付费
      </div>
      <div class="moneywidth ding">
        <span style="margin-left: 20px">输入购买费用</span>
        <input type="text" v-model.number="moneyCount" v-show="show" />
      </div>
      <div>
        <input
          type="radio"
          name="money"
          value="1"
          v-model="moneyMode"
          style="margin-left: 50px"
          @click="show = false"
        />
        免费
      </div>
    </div>
    <div class="jianju">
      <label for="">视频简介</label>
      <input
        type="text"
        class="yangshi"
        placeholder="输入分享描述"
        v-model="des"
      />
    </div>
    <div class="ding jianju">
      <div>视频详情</div>
      <textarea
        name=""
        id=""
        cols="100"
        rows="10"
        v-model="videoDetail"
        style="margin-left: 20px"
      ></textarea>
    </div>
    <div class="ding">
      <div>开售时间</div>
      <div style="margin-left: 20px">
        <input type="radio" name="timer" value="0" v-model="timeModel" />
        立即开售 <br />
        <input type="radio" name="timer" value="1" v-model="timeModel" />
        定时开售 <br />
        <input type="radio" name="timer" value="2" v-model="timeModel" />
        暂不开售 <br />
      </div>
      <div style="margin-top: 22px; margin-left: 20px">
        开售时间 <input type="text" name="" id="" v-model="timeCount" />
      </div>
    </div>
    <div class="btn">
      <button @click="submit">保存</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: '',
      teacher: '',
      cate: '',
      moneyMode: '',
      moneyCount: '',
      des: '',
      videoDetail: '',
      timeModel: '',
      timeCount: '',
      show: true,
    }
  },
  methods: {
    submit() {
      // console.log(this.title)

      const params = {
        title: this.title,
        teacher: this.teacher,
        cate: this.cate,
        moneyMode: this.moneyMode,
        moneyCount: this.moneyCount,
        des: this.des,
        videoDetail: this.videoDetail,
        timeModel: this.timeModel,
        timeCount: this.timeCount,
      }
      if (this.moneyMode == '1') delete params.moneyCount
      if (this.timeModel != '1') delete params.timeCount
      console.log(params)
    },
  },
}
</script>

<style>
.main {
  width: 800px;
  height: 600px;
  border: 1px solid #e9e9e9;
  margin: 0 auto;
  padding-top: 30px;
  padding-left: 50px;
}
.yangshi {
  width: 600px;
  height: 30px;
  margin-left: 20px;
}
.jianju {
  margin-bottom: 20px;
}
.ding {
  display: flex;
}
.btn {
  width: 40px;
  height: 20px;
  text-align: center;
  line-height: 10px;
  margin-top: 20px;
  margin-right: 60px;
  float: right;
}
.moneywidth {
  width: 300px;
  height: 20px;
}
</style>
